@charset 'uft-8';

@function getvw($w) {
  @return ($w / 750) * 100 + vw;
}

.header {
  .nav {
    display: flex;
    margin: 5px 23px;
    justify-content: space-between;
    align-items: center;
    img {
      width: getvw(123);
      height: getvw(123);
    }
    .seaver {
      position: relative;

      input {
        width: getvw(266);
        height: getvw(51);
        font-size: getvw(24);
        color: #777777;
        border: 1px solid #ff9344;
        border-radius: getvw(51);
      }
      i {
        color: #ff9344;
        font-size: getvw(30);
        position: absolute;
        right: getvw(15);
        top: 50%;
        transform: translateY(-50%);
      }
    }
//地点定位
    .shengfen {
      position: relative;
      select {
        width: getvw(159);
        height: getvw(56);
        background-color: #fff;
        border: 1px solid #ff9344;
        font-size: getvw(26);
        appearance: none;
        padding-left: getvw(20);
      }
      &::after {
        content: "";
        border: getvw(16) solid;
        border-color: #ff9344 transparent transparent transparent;
        position: absolute;
        top: 60%;
        left: 70%;
        transform: translateY(-50%);
      }
    }
  }
//   头部图片加载动画
  @keyframes donghua {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-200%);

    }
  }
  .img{
    width: 100%;
    overflow: hidden;
    .imgAf {
        display: flex;
        animation: donghua 8s infinite;
        a {
            width: 100%;
            flex-shrink: 0;
            img {
                width: 100%;
              }
        } 
      }
      .imgBf{
        width: 100%;
        height: getvw(20);
        background-color: rgb(28, 28, 29);
        opacity: 0.6;
        position: absolute;
        top: getvw(300);
       
        div{
          width: getvw(150);
          height: getvw(20);
          background-color: #fff;
        }
      }
  }

}
// 优惠团购
.section {
  margin-top: getvw(30);
  
  .shop {
    margin: 0 getvw(23);
    height: getvw(56);
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    .shopleft {
      display: flex;
      font-size: getvw(30);
      line-height: getvw(56);
      img {
        width: getvw(56);
        height: getvw(54);
      }
    }
    .shopright {
      display: flex;
      font-size: getvw(25);
      i {
        color: #ff9344;
        font-size: getvw(26);
      }
    }
  }
  .sectionAf {
    width: getvw(580);
    height: getvw(230);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    img {
      width: getvw(241);
      height: getvw(94);
      align-self: center;
      &:hover {
        box-shadow: 0px 1px 1px 2px rgb(233, 169, 169);
      }
    }
  }
}
// 猜你喜欢+菜单
.main {
  margin-top: getvw(30);
  margin-bottom: getvw(110);
  .like {
    margin: 0 getvw(20);
    height: getvw(56);
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    .likeleft {
      display: flex;
      font-size: getvw(30);
      line-height: getvw(56);
      i {
        color: #ff9344;
        font-size: getvw(56);
      }
    }
    .likeright {
      display: flex;
      font-size: getvw(25);
      i {
        color: #ff9344;
        font-size: getvw(26);
      }
    }
  }
  .menu {
    margin: getvw(20) getvw(20);
    display: flex;
    justify-content: space-between;
    img {
      width: getvw(211);
      height: getvw(164);
    }
    .menuRight {
      width: getvw(500);
      margin-top: getvw(30);
      margin-left: getvw(20);

      .menuAf {
        display: flex;
        justify-content: space-between;
        a {
          color: #000;
          text-decoration: none;
          background-color: #fff;
          font-size: getvw(30);
          padding-bottom: getvw(20);
        }
        p:nth-of-type(1) {
          color: #494949;
          font-size: getvw(22);
        }
      }
      .menuBf {
        color: #494949;
        font-size: getvw(22);
        padding-bottom: getvw(20);
      }
      .menuCf {
        color: #494949;
        display: flex;
        justify-content: space-between;
        p:nth-of-type(1) {
          color: #ff9344;
          font-size: getvw(26);
        }
        p:nth-of-type(2) {
          font-size: getvw(22);
        }
      }
    }
  }
}
